<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<ng-container *ngIf="!!data">
    <span>{{'explore_cppy_limit_selected_res_label' | i18n: [data.length]}}</span>
</ng-container>

<div class="header">
    <h3>{{'explore_copy_limit_add_tip_label' | i18n}}</h3>
</div>

<div class="collapse-content">
    <lv-collapse>
        <lv-collapse-panel lvTitle="{{'common_explore_label' | i18n}}" [lvExtra]="dataExtraTpl" lvExpanded>
            <lv-checkbox-group [(ngModel)]="dataLimit" (ngModelChange)="dataLimitChange($event)" style="width:100%">
                <ng-container *ngFor="let item of dataLimitGroup">
                    <lv-checkbox [lvValue]="item.value" class="checkbox-width">{{item.label}}</lv-checkbox>
                </ng-container>
            </lv-checkbox-group>
            <ng-template #dataExtraTpl>
                <div>
                    <lv-group lvGutter="4px">
                        <span class="aui-link" *ngIf="!dataLimitAllSelect"
                            (click)="allSelectDataLimit($event)">{{'system_resourceset_all_select_label' |
                            i18n}}</span>
                        <span class="aui-link" *ngIf="dataLimitAllSelect"
                            (click)="allSelectDataLimit($event)">{{'system_resourceset_cancel_all_select_label'
                            | i18n}}</span>
                    </lv-group>
                </div>
            </ng-template>
        </lv-collapse-panel>
    </lv-collapse>
</div>

<div class="header" *ngIf="!data">
    <h3>{{'explore_copy_limit_select_res_label' | i18n}}</h3>
</div>

<lv-tabs *ngIf="!data" [(lvActiveIndex)]="activeIndex">
    <ng-container *ngFor="let copyType of copyTypes">
        <lv-tab [lvTitle]="appTabTitleTpl" lvId="{{copyType.key}}">
            <lv-tabs *ngIf="!data" lvType="underline">
                <ng-container *ngFor="let item of copyType.appList">
                    <lv-tab [lvTitle]="tabTitleTpl">
                        <lv-collapse [lvMultiExpansion]="false" [lvBeforeExpanded]="beforeExpanded">
                            <ng-container *ngFor="let app of item.apps">
                                <lv-collapse-panel [lvTitle]="collapseTitleTpl" lvId="{{app.label}}">
                                    <aui-simple-resource-template [allSelectionMap]="allSelectionMap" [type]="app.type"
                                        [subType]="app.subType" [subName]="app.label"
                                        (SelectChange)="selectChange($event)"
                                        [copyType]="copyType.key"></aui-simple-resource-template>
                                </lv-collapse-panel>
                                <ng-template #collapseTitleTpl>
                                    <!-- 用于应用已选展示 -->
                                    <lv-group lvGutter="4px" class="resourceset-tag">
                                        <span>{{app.label}}</span>
                                        <lv-tag lvAlarmStatus="minor"
                                            *ngIf="!!app?.selected">{{'common_selected_simple_label' |
                                            i18n}}</lv-tag>
                                    </lv-group>
                                </ng-template>
                            </ng-container>
                        </lv-collapse>
                    </lv-tab>
                    <ng-template #tabTitleTpl>
                        <ng-container *ngIf="!!item?.selected">
                            <lv-group lvGutter="4px" class="resourceset-tag">
                                <span>{{item.label}}</span>
                                <lv-tag lvAlarmStatus="minor">{{'common_selected_simple_label' | i18n}}</lv-tag>
                            </lv-group>
                        </ng-container>
                        <ng-container *ngIf="!item?.selected">
                            <span>{{item.label}}</span>
                        </ng-container>
                    </ng-template>
                </ng-container>
            </lv-tabs>
            <ng-template #appTabTitleTpl>
                <ng-container *ngIf="!!copyType?.selected">
                    <lv-group lvGutter="4px" class="resourceset-tag">
                        <span>{{copyType.label}}</span>
                        <lv-tag lvAlarmStatus="minor">{{'common_selected_simple_label' | i18n}}</lv-tag>
                    </lv-group>
                </ng-container>
                <ng-container *ngIf="!copyType?.selected">
                    <span>{{copyType.label}}</span>
                </ng-container>
            </ng-template>
        </lv-tab>
    </ng-container>
</lv-tabs>